<template>
    <div>
        <!-- 轮播图区域 -->
           <!-- <mt-swipe :auto="4000">
                <mt-swipe-item v-for="item in lunbotulist" :key="item.id">
                    <img :src="item.img" alt="">
                </mt-swipe-item>
            </mt-swipe> -->
            <!-- 引用轮播图私有组件 -->
            <swiper :lunbotulist = "lunbotulist" :isFull='true'></swiper>


            <!-- 9宫格到6宫格改造 -->
            <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-4"><router-link to="/home/news">
		                    <img src="../images/menu1.png" alt="">
		                    <div class="mui-media-body">新闻资讯</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-4"><router-link to="/home/photos">
		                    <img src="../images/menu2.png" alt="">
		                    <div class="mui-media-body">图片分享</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-4"><router-link to="/home/ShopList">
		                    <img src="../images/menu3.png" alt="">
		                    <div class="mui-media-body">商品购买</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-4"><a href="#">
		                    <img src="../images/menu4.png" alt="">
		                    <div class="mui-media-body">留言反馈</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-4"><a href="#">
		                   <img src="../images/menu5.png" alt="">
		                    <div class="mui-media-body">视频专区</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-4"><a href="#">
		                    <img src="../images/menu6.png" alt=""></span>
		                    <div class="mui-media-body">联系我们</div></a></li>
		        </ul> 

        <h1>我是HomeContainer组件</h1>
    </div>
</template>
<script>
// 引入轮播图组件
import swiper from './subcomponents/Lunbotu.vue'
export default {
    data:function(){
        return {
            lunbotulist:[],
        }
    },
    // 页面的vm数据添加到页面时生效的钩子
    created(){
      this.getlunbotu();
    },
    methods:{
        getlunbotu(){
           this.$http.get('api/getlunbo').then(result => {
               console.log(result.body)
            if(result.body.status == 0 ){
                this.lunbotulist = result.body.message;
            }
           })
        }
    },
    // 挂载轮播图私有组件
   components: {
       swiper
   }
}
</script>
<style lang="scss" scoped>
 body {
    background-color: #fff;
}
 .mui-media-body {
         font-size: 12px;
     }
 .mui-table-view {
     background-color: #fff;
     border: 0;
     img {
         height: 60px;
         width: 60px;
     }
 }
.mui-table-view li {
    border: 0!important;
}
</style>

